<style lang="less" scoped>
	.lyric {
		width: 100%;
		height: 50%;
		overflow: hidden;
		position: absolute;
		// transform: translateY(20px);
		top: 20%;

		.container {
			width: 90%;
			margin: 0 auto;

			.text {
				text-align: center;

				// color:#fefefe;
				p {
					color: #ccc;
					margin-top: 10px;
					position: relative;
					transition: all 0.8s;
				}
				.active{
					color:#fefefe;
					font-size: 20px;
				}
			}
		}
	}
</style>
<template>
	<view class="lyric">
		<div class="container">
			<div class="text">
				<p v-for="(item,index) in lyric" :style="`transform: translateY(-${lyricIndex * 20}px`" :class="index==lyricIndex?'active':'act'">
					{{item.text}}
				</p>
			</div>
		</div>
	</view>
</template>

<script>
	import {
		getMusicLyric
	} from '../api/request';
	export default {
		name: "lyric",
		props: {
			obj: {
				type: Object,
				required: true
			},
			time:{
				type:Number,
				required:true
			},
		},
		data() {
			return {
				lyric:[],
				lyricIndex:0,
			};
		},
		methods: {
			async getMusicLyricFn(id) {
				await getMusicLyric({
						id
					})
					.then(
						data => {
							let {
								lrc
							} = data
							let arr = lrc.lyric.split("\n")
							// console.log('--->' + arr)
							let regExp = /\[(\d{2}):(\d{2}).(\d+)\](.{1,})/
							for (let i = 0; i < arr.length; i++) {
								// 判断字符串是否符合格式
								if (regExp.test(arr[i])) {
									let obj={}
									// 提取歌词
									let result = regExp.exec(arr[i]);
									let m = result[1] - 0; 
									let s = result[2] - 0;
									let ms = result[3] - 0;
									let text = result[4];
									let time = (m * 60) + s + (ms / 1000);
									obj.time=time
									// obj.time=
									obj.text=text
									obj.index=i
									// console.log("time:"+time);
									this.lyric.push(obj)
								}
							}
							// console.log('--->' + this.lyric)
						})
			},
		},
		mounted() {
			this.getMusicLyricFn(this.obj.id)
			
		},
		watch:{
				time(val){
					
					for(let i=0;i<this.lyric.length-1;i++){
						
						if(val>=this.lyric[i].time&&val<=this.lyric[i+1].time){
							this.lyricIndex=i
							break;
						}
					}
				},
				
		},
		filters: {
		        formatime(value) {  
		            let m = 0;
		            let s = 0;
		            m = Math.floor(value % 3600 / 60);
		            s = Math.floor(value % 60);
		            m = m < 10 ? '0' + m : m;
		            s = s < 10 ? '0' + s : s;
		            return `${m}:${s}`;
		        }
		    },
	}
</script>